<!--
 * @description: 手动加在script脚本,失败会重试 3 次
 * 介绍: 你可以在你的 Web 应用中集成 Google Identity Services，提供简化的登录流程和增强的安全性。Google Identity Services 使用新的客户端库和登录按钮，提供了更好的用户体验和更强的安全性。
 * 1. 引入 Google Identity Services 客户端库 ：通过 <script src="https://accounts.google.com/gsi/client" async defer></script> 引入 Google Identity Services 客户端库。
 * 2. 添加 Google 登录按钮容器
 * 使用 <div id="g_id_onload"> 配置 Google 登录按钮的参数：
 * data-client_id：你的 OAuth 2.0 客户端 ID。
 * data-context：上下文，这里设置为 signin。
 * data-ux_mode：用户体验模式，这里设置为 popup。
 * data-callback：登录成功后的回调函数。
 * data-auto_prompt：是否自动提示用户登录，这里设置为 false。
 * 4.添加 Google 登录按钮
 * 使用 <div class="g_id_signin" data-type="standard"></div> 添加 Google 登录按钮。
 * 5.处理登录回调
 * 5.1 在 handleCredentialResponse 函数中处理登录成功后的回调。回调函数接收一个 response 对象，其中包含用户的 JWT token。
 * 5.2 使用 parseJwt 函数解析 JWT token，并获取用户的邮箱信息。
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-08-21 16:51:07
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-08-21 18:20:23
-->
<template>
  <div class="google" @click.stop="googleClick">
    <!-- 插槽 -->
    <slot></slot>
    <!-- 方案1 -->
    <div
      id="google_login_btn"
      ref="googleLoginBtnRef"
      @click.stop="googleClick"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as jwt from "jose";
import * as MITO from "@zhj1214/qdjk-web";
import { useGlobalStore } from "~/store/global";
import { loadScript, getOssFileUrl } from "@/utils";

const $emit = defineEmits(["success"]);

const googleLoginBtnRef = ref<any>();
const globalStore = useGlobalStore();

const googleClientId = computed(() => {
  return globalStore.googleClientId;
});

// 解析,回调参数
const parsingData = (googleUser: any) => {
  // 获取用户信息
  if (googleUser.credential) {
    const profile = jwt.decodeJwt(googleUser.credential) as {
      aud: string;
      azp: string;
      email: string;
      email_verified: true;
      exp: number;
      family_name: string;
      given_name: string;
      iat: number;
      iss: string;
      jti: string;
      name: string;
      nbf: number;
      picture: string;
      sub: string;
    };
    console.log("--profile--", profile);

    const params = {
      id: profile.sub,
      name: profile.name,
      email: profile.email,
      imgUrl: profile.picture,
      credential: googleUser.credential,
    };

    $emit("success", params);
  }
};

// js 加载完成以后,配置授权信息和回调
const googleAuth2Call = () => {
  // console.log("--loadScript--js 加载完成以后,配置授权信息和回调");
  try {
    google.accounts.id.initialize({
      client_id: googleClientId.value, // 你的 OAuth 2.0 客户端 ID。
      context: "signin", // 上下文，这里设置为 signin。
      ux_mode: "popup", // spa 单页面应用,使用这个; 当用户点击登录按钮时，会弹出一个新的浏览器窗口或对话框，用户在其中完成登录和授权。
      // ux_mode: "redirect", // 传统: 当用户点击登录按钮时，当前页面会被重定向到 Google 的授权页面，用户在其中完成登录和授权。授权完成后，用户会被重定向回你指定的 redirect_uri
      // login_uri: file.pageUrl, // 指定授权完成后重定向回你的应用的 URL。
      auto_prompt: false, // 是否自动提示用户登录，这里设置为 false
      callback: (googleUser: any) => {
        console.log("--googleUser-000-", googleUser);
        googleUser && parsingData(googleUser);
      },
    });

    google.accounts.id.renderButton(
      googleLoginBtnRef.value ?? document.getElementById("google_login_btn")!,
      {
        type: "standard", // customization attributes
        theme: "outline", // customization attributes
        size: "large",
        text: "signin",
      } // customization attributes
    );
  } catch (error) {
    console.error("google 加载失败:", error);
    MITO.log({
      message: `google 加载失败: ${error}`,
      tag: "google加载失败",
      level: "high",
      ex: "手动",
    });
  }
};

loadScript(
  "https://accounts.google.com/gsi/client",
  (val: any) => {
    console.log("-google-loadScript--加载完成", val);
    if (val == false) {
      initAuth2();
    } else {
      googleAuth2Call();
    }
  },
  true,
  false
);

const googleClick = () => {
  // if (!window.google) return;
  // console.log("--window.google.accounts.id--", window.google.accounts);
  // google.accounts.id.prompt();
  // window.google.accounts.id.prompt();
};

onMounted(() => {
  try {
    if (!window?.google) {
      // console.log("-google-initAuth2-");
    } else {
      // console.log("-google-googleAuth2Call-");
      googleAuth2Call();
    }
  } catch (error) {
    console.log("-share-error--", error);
  }
});

onBeforeUnmount(() => {
  // stopWatch && stopWatch();
});

// 手动加载
const initAuth2 = () => {
  const ele = document.createElement("script");
  ele.src = getOssFileUrl({
    u: "/file/auth2/client",
  }).u;
  document.body.appendChild(ele);

  ele.onload = () => {
    googleAuth2Call();
  };

  ele.onerror = () => {
    console.log("google login error");
  };
};
</script>

<style lang="scss" scoped>
.google {
  position: relative;
  &-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &-slot {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
}

#google_login_btn {
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 10;
  opacity: 0.01;
  :deep(iframe) {
    width: calc(100% + 24px) !important;
  }
}
</style>
